import { useState } from 'react';
import './App.css';

function App() {
  // hooks函数，要写在组件的顶端。
  const [userInfo, setUserInfo] = useState({ username: '创神', roleName: '医生', role: 5 })
  const [count, setCount] = useState(() => 0)
  const handlerCount = () => {
    setCount(count + 1)
  }

  return (

    <div className="App">
      <h1>count: {count}</h1>
      <h1>username: {userInfo.username}</h1>

      {/* <button type='button' onClick={() => {
        setCount(count + 1)
      }}>+1</button> */}

      <button type='button' onClick={handlerCount}>+1</button>
      <br />
      <button type='button' onClick={() => {
        setCount((prevState) => {
          console.log(prevState); // 旧的状态值。
          return prevState + 1
        })
      }}>使用Callback 来修改状态</button>

      <button type='button' onClick={
        () => {
          // userInfo.username = 'xxx' //不能直接给对象的属性赋值。
          setUserInfo({ ...userInfo, username: 'yyy' })
          // 引用的数据类型在修改时，都要注意浅拷贝或深拷贝。
        }

      }>修改用户名</button>

    </div>
  );
}

export default App;
